<template>
    <div class="user" style="">
        <div style="margin-bottom: 10px">
            <el-input v-model="text" @keyup.enter.native="getusers" style="width: 200px" size="small">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%" border>
            <el-table-column label="id" prop="id" width="60">
            </el-table-column>
            <el-table-column label="昵称" prop="username" width="100">
            </el-table-column>
            <el-table-column label="性别" prop="gender" width="60">
            </el-table-column>
            <el-table-column label="学号" prop="studentId" width="100">
            </el-table-column>
            <el-table-column label="年龄" prop="age" width="100">
            </el-table-column>
            <el-table-column label="头像路径" prop="headSculpture" width="160">
            </el-table-column>
            <el-table-column label="用户权限" prop="userRole" width="80">
                <template slot-scope="scope">
                    {{ scope.row.userRole == 1 ? "普通用户" : "管理员" }}
                </template>
            </el-table-column>
            <el-table-column label="邮箱" prop="email" width="160">
            </el-table-column>
            <el-table-column label="个性签名" prop="signature" width="160">
            </el-table-column>
            <el-table-column label="学校名称" prop="school" width="160">
            </el-table-column>
            <el-table-column label="手机号" prop="phone" width="160">
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="100">
            </el-table-column>
            <el-table-column align="center" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹窗   -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
            <el-form :model="entity">
                <el-form-item label="昵称" label-width="150px">
                    <el-input v-model="entity.username" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="150px">
                    <el-input v-model="entity.age" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="150px">
                    <el-input v-model="entity.email" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="个性签名" label-width="150px">
                    <el-input v-model="entity.signature" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="150px">
                    <el-input v-model="entity.phone" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="权限" label-width="150px">
                    <el-radio-group v-model="entity.userRole">
                        <el-radio :label="1">普通</el-radio>
                        <el-radio :label="2">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <div class="page" style="margin: 24px auto;display: flex;justify-content: center;" v-show="pageShow">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="pageSize" :page-sizes="[3, 6, 9, 12]"
                layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import API from "@/api/request";
export default {
    inject: ['reload'],
    data() {
        return {
            tableData: [],
            search: '',
            //数据总数
            total: 0,
            //当前页
            currentPage: 1,
            //每页数量
            pageSize: 3,
            //控制分页显示
            pageShow: false,
            entity: {},
            dialogFormVisible: false,
            text: ""
        }
    },
    methods: {

        handleEdit(index, row) {
            console.log(index, row);
            this.entity = JSON.parse(JSON.stringify(row))
            console.log(this.entity)
            // this.selectedTypeName();

            this.dialogFormVisible = true;
        },
        handleDelete(index, row) {
            API.delete("/api/user/" + row.studentId).then(res => {
                if (res.data.code === 200) {
                    this.$message.success("操作成功!");
                } else {
                    this.$message.error("操作失败!");
                    console.error("API 请求失败", res);
                }
                this.reload();
            }).catch(error => {
                console.error("API 请求错误", error);
            });
        },

        getusers() {
            API.get("/api/user/pageList", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    name: this.text
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.tableData = res.data.data.records;
                    this.total = res.data.data.total;
                    this.currentPage = res.data.data.current;
                    if (this.total > 0) {
                        this.pageShow = true;
                    }

                } else {
                    console.error("API 请求失败", res);
                }
            }).catch(error => {
                console.error("API 请求错误", error);
            });
        },
        //控制页数的函数
        handleSizeChange(val) {
            this.pageSize = val;
            console.log(`每页 ${val} 条`);
            this.getLifeSharings();

        },
        // 控制页码的函数
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log("查看当前页" + this.currentPage);
            console.log(`当前 ${val} 页`);
            this.getLifeSharings();
        },
        save() {
            API.put("/api/user/update", {
                "id": this.entity.id,
                "username": this.entity.username,
                "age": this.entity.age,
                "email": this.entity.email,
                "signature": this.entity.signature,
                "phone": this.entity.phone,
                "userRole": this.entity.userRole
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success("操作成功!");
                    this.dialogFormVisible = false;
                    this.reload()
                } else {
                    console.error("API 请求失败", res);
                }
            }).catch(error => {
                console.error("API 请求错误", error);
            });
        },


    },


    created() {
        this.getusers();
    },

}
</script>
<style>
.user {
    padding: 20px;
}
</style>